<?php
	include 'functions.php';
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
	function resizeTextarea(id) {
		var a = document.getElementById(id);
		a.style.height = 'auto';
		a.style.height = a.scrollHeight + 'px';
	}

	function init() {
		var a = document.getElementsByTagName('textarea');
		for (var i = 0, inb = a.length; i < inb; i++) {
			if (a[i].getAttribute('data-resizable') == 'true')
				resizeTextarea(a[i].id);
		}
	}
	addEventListener('DOMContentLoaded', init); 
</script>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title> reflection </title>
		<link rel="stylesheet" type="text/css" href="css/styles.css" />
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
	</head>
	<body>
		<header></header>

		<form id="wholeForm" action="reflectionPost.php" method="post" class="nl-form">
			<div id="dynamicForm1" class="nl-form hidden">
				<select>
					<?php $getGReflection = getGReflection(1, 1); ?>
				</select>
				<select>
					<?php $getGReflection = getGReflection(1, 2); ?>
				</select>
				<textarea id="dynamicForm1_text" rows="1" placeholder="is" class="nl-form" onkeyup="resizeTextarea('dynamicForm1_text')"  data-resizable="true"></textarea>
			</div>

			<div id="dynamicForm2" class="nl-form hidden">
				<select>
					<?php $getGReflection = getGReflection(2, 1); ?>
				</select>
				<select>
					<?php $getGReflection = getGReflection(2, 2); ?>
				</select>
				<textarea id="dynamicForm2_text" rows="1" placeholder="type here" class="nl-form" onkeyup="resizeTextarea('dynamicForm2_text')"  data-resizable="true"></textarea>
			</div>

			<div id="dynamicForm3" class="nl-form hidden">
				<select>
					<?php $getGReflection = getGReflection(3, 1); ?>
				</select>
				<select>
					<?php $getGReflection = getGReflection(3, 2); ?>
				</select>
				<select>
					<?php $getGReflection = getGReflection(3, 3); ?>
				</select>
				<textarea id="dynamicForm3_text" rows="1" placeholder="type here"  class="nl-form" onkeyup="resizeTextarea('dynamicForm3_text')"  data-resizable="true"></textarea>				
 

			</div>

			<div id="outcomeForm1" class="nl-form outcome hidden">
				<select>
					<?php $getGOutcome = getGOutcome(1, 1); ?>
				</select>
				<textarea id="outcomeForm1_text" rows="1" placeholder="type here"  class="nl-form" onkeyup="resizeTextarea('outcomeForm1_text')"  data-resizable="true"></textarea>
				<select>
					<?php $getGOutcome = getGOutcome(1, 2); ?>
				</select>
				<textarea id="outcomeForm1_text2" rows="1" placeholder="type here"  class="nl-form" onkeyup="resizeTextarea('outcomeForm1_text2')"  data-resizable="true"></textarea>
			</div>

			<div id="outcomeForm2" class="nl-form outcome hidden">
				<select>
					<?php $getGOutcome = getGOutcome(2, 1); ?>
				</select>
				<select>
					<?php $getGOutcome = getGOutcome(2, 2); ?>
				</select>
				<textarea id="outcomeForm2_text" rows="1" placeholder="type here"  class="nl-form" onkeyup="resizeTextarea('outcomeForm2_text')"  data-resizable="true"></textarea>
			</div>

			<div id="outcomeForm3" class="nl-form outcome hidden">
				<select>
					<?php $getGOutcome = getGOutcome(3, 1); ?>
				</select>
				<textarea id="outcomeForm3_text" rows="1" placeholder="type here"  class="nl-form" onkeyup="resizeTextarea('outcomeForm3_text')"  data-resizable="true"></textarea>
				<select>
					<?php $getGOutcome = getGOutcome(3, 2); ?>
				</select>
				<textarea id="outcomeForm4_text" rows="1" placeholder="type here"  class="nl-form" onkeyup="resizeTextarea('outcomeForm4_text')"  data-resizable="true"></textarea>
			</div>

			<div class="nl-submit-wrap">
				<button class="nl-submit" type="submit" id="wfs">
					Save
				</button>
			</div>
			<div class="nl-overlay"></div>
		</form>

		<input onclick="toggleHelp(this.value,this.id)" type="button" value="Hide help" id="helpReflect" />
		<input onclick="spinHelp()" type="button" value="spin ref" id="spinHelp" />
		<input onclick="spinHelpOutcome()" type="button" value="spin outcome" id="spinHelpOutcome" />
		<input onclick="refresher()" type="button" value="refresher" id="refresher" />
		<footer></footer>
		<script src="js/nlform.js"></script>

		<script>
	var nlform = new NLForm(document.getElementById('wholeForm'));
		</script>
		<script type="text/javascript">
	// get the start of the form name so a random number can be appended
	var formname = "dynamicForm";
	var outcomeForm = "outcomeForm";

	//choose a random number between 1 and 5
	var randNo1 = Math.floor((Math.random() * 3) + 1);
	var randNo2 = Math.floor((Math.random() * 3) + 1);

	//make the full form name
	//var chosenform = formname.concat(formno);
	var chosenform = formname.concat(randNo1);
	var chosenOutcomeForm = outcomeForm.concat(randNo2);

	//show me
	window.alert(chosenOutcomeForm)
	window.alert(chosenform)
	//set the visbility of the chosen form to visible
	document.getElementById(chosenform).className = "nl-form visible";
	document.getElementById(chosenOutcomeForm).className = "nl-form outcome visible";

	var x = document.getElementById(chosenform);
	var y = x.getElementsByTagName("*");
	var i;
	for ( i = 0; i < y.length; i++) {
		y[i].setAttribute("name", "formData[]");
	}

	var x1 = document.getElementById(chosenOutcomeForm);
	var y1 = x1.getElementsByTagName("*");
	var i;
	for ( i = 0; i < y1.length; i++) {
		y1[i].setAttribute("name", "formData[]");
	}

	function toggleHelp(myVal, btId) {

		if (myVal == "Hide help") {

			document.getElementById(chosenform).className = "nl-form hidden";
			document.getElementById(chosenOutcomeForm).className = "nl-form outcome hidden";
			document.getElementById(btId).value = "Show help";
		}

		else {
			var current = document.getElementById(chosenform).className = "nl-form visible";
			document.getElementById(chosenOutcomeForm).className = "nl-form outcome visible";
			document.getElementById(btId).value = "Hide help";
		}
	}

	function spinHelp() {

		var x = document.getElementsByClassName("nl-form visible");
		var i;
		for ( i = 0; i < x.length; i++) {
			x[i].setAttribute("class", "nl-form hidden");
		}

		var formname = "dynamicForm";
		var randNo1 = Math.floor((Math.random() * 3) + 1);
		var nextform = formname.concat(randNo1);

		//alert(nextform)
		//set the visbility of the chosen form to visible
		document.getElementById(nextform).className = "nl-form visible";
	}

	function spinHelpOutcome() {

		var x = document.getElementsByClassName("nl-form outcome visible");
		var i;
		for ( i = 0; i < x.length; i++) {
			x[i].setAttribute("class", "nl-form outcome hidden");
		}

		var outcomeForm = "outcomeForm";
		var randNo2 = Math.floor((Math.random() * 3) + 1);
		var nextformOutcome = outcomeForm.concat(randNo2);

		//alert(nextform)
		//set the visbility of the chosen form to visible
		document.getElementById(nextformOutcome).className = "nl-form outcome visible";
		//location.reload();
	}

	function refresher() {
		location.reload();
	}

		</script>
	</body>
</html>